﻿<template>

<!--  顶部导航栏-->
  <TopMenu/>

<!--  主体区域-->
  <div>
<!--    背景-->
    <div style="width: 100%;height: 90vh;overflow: hidden;opacity:0.8;background-color: lightgray;">

      <!--左上批量上传并展示原图区域-->
      <span
          style="position: absolute;margin: 4% 0 0 9%;font-weight: bolder;font-size: 30px;"
      >Upload Original Picture</span>
      <div
          style="position: absolute; width: 30%; height: 35%; border: 1px solid black; margin: 7% 0 0 6%;">
        <!--          带有滚动条的图片列表-->
<!--        上传组件-->
        <el-upload
            ref="upload"
            action="#"
            multiple
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-preview="showImage"
            style="position: absolute;margin: 7% 0 0 10%; height:80%;width: 33%;overflow-y: auto; "
        >
          <el-button type="primary" style="margin: 5% 0 0 15%">select figures</el-button>
        </el-upload>
<!--        原图展示-->
        <div class="original_figure" style="position: absolute; width: 45%; height: 75.5%; border: 1px solid black; margin: 8% 0 0 50%;">
          <div v-if="selectedImage" class="selected-image">
            <el-image :src="selectedImage.url" style="width: 100%; height: 100%;">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
              <template #error>
                <div class="image-slot" style="margin: 27% 33%;"><i class="el-icon-picture-outline" style="font-size: xx-large"></i></div>
                <div class="image-slot" style="margin: 20% 42%;">(click file's name to show)</div>
              </template>
            </el-image>

          </div>
        </div>
      </div>




<!--      左下功能区-->
<!--      缺陷检测-->
      <div style="position: absolute; width: 30%; height: 34%; border: 1px solid black; margin: 24.8% 0 0 6%;">
        <!-- 第一行：标题 -->
        <div style="display: flex; justify-content: center; align-items: center; height: 30%;">
          <span style="font-weight: bolder;font-size: 30px;">Result of the Detection</span>
        </div>

<!--        第二行：检测、聚类按钮-->
        <el-button style="position: absolute;margin: 1% 0 0 17.5%;width: 135px; height:50px;border-radius: 30px;font-size: x-large"
                   plain class="button" size="large" type="success" @click="detect">
          Detect <i class="el-icon-search"></i>
        </el-button>

        <el-button style="position: absolute;margin: 1% 0 0 57.5%;width: 140px; height:50px;border-radius: 30px;font-size: x-large"
                   plain class="button" size="large" type="primary" @click="detect">
          Cluster <i class="el-icon-data-analysis"></i>
        </el-button>

        <!-- 第三行：Classification 和 Score -->
        <div style="display: flex; justify-content: center; align-items: center; height: 70%;margin: 4% 0 0 0;">
          <el-row :gutter="150">
            <el-col :span="12">
              <div class="text" style="white-space: nowrap; font-size: 20px;">
                <span class="mx-1">Classification：</span>
                <span style="text-decoration: underline;white-space:pre;color:green;font-weight: bold">{{ classification }}</span>
              </div>
            </el-col>
<!--            加红色边框：padding:3px;border: 5px solid red-->
            <el-col :span="12">
              <div class="text" style="white-space: nowrap; font-size: 20px;">
                <span class="mx-1">Score：</span>
                <span style="text-decoration: underline;white-space:pre;color:green;font-weight: bold">{{ score }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


      <!--      右上按钮区-->
      <div style="position: absolute; margin: 5% 0 0 53.5%; width: 50%; height: 20%; border: 0px solid black;">
        <el-row :gutter="50">
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-circle-plus" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-remove" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-full-screen" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-s-management" style="font-size: 50px;"></i>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="icon">
              <i class="el-icon-download" style="font-size: 50px;"></i>
            </div>
          </el-col>
        </el-row>
      </div>


      <!--      右下图片区-->
      <div style="position: absolute; margin: 10.5% 0 0 43%; width: 50%; height: 61.5%; border: 3px solid black;">
        <el-row :gutter="100" style="margin: 7.5% 0 0 10%;width:90%;font-weight: bold;font-size: 25px;">
<!--           style="border: 3px solid darkred;"-->
          <el-col :span="7">
            <span>Original</span>
          </el-col>
          <el-col :span="7">
            <span>Detection</span>
          </el-col>
          <el-col :span="7">
            <span>Segment</span>
          </el-col>
        </el-row>


<!--        border: 3px solid darkred;-->
        <div class="image"
             style="position:absolute;margin:0 0 0 0.5%;width:99%; height: 70%;background-color: lightgray">
          <el-image :src="url_result" style="width: 100%; height: 100%;">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
            <template #error>
              <div class="image-slot" style="margin: 20% 42%;"><i class="el-icon-picture-outline" style="font-size: xx-large">result</i></div>
            </template>
          </el-image>
        </div>


      </div>


   </div>
  </div>


</template>

<script>
import TopMenu from "@/components/TopMenu.vue";
import {ElMessage} from "element-plus";

export default {
  name: "ImageGUI",
  components: {TopMenu},

  data() {
    return {
      classification: '    ',
      score:'    ',
      image_list: [],
      selectedImage: null,
    };
  },

  // 在进入界面时调用 clear_everything 方法
  created() {
    this.clear_everything();
  },

  // 在组件销毁时调用 clear_everything 方法
  unmounted() {
    this.clear_everything();
  },

  methods: {
    clear_everything() {
      // 清除图片 URL 和撤销临时对象
      this.classification = '    ';
      this.score = '    ';
      this.image_list = [];
      if (this.selectedImage) {
        URL.revokeObjectURL(this.selectedImage.url);
      }
      this.selectedImage = null;
    },

    // 更新image_list数组
    handleFileChange(file, fileList) {

      // // 查看上传的file对象的全部属性
      // const ownPropertyNames0 = Object.getOwnPropertyNames(file);
      // ownPropertyNames0.forEach(name => {
      //   console.log("handleFileChange file:"+name + ": " + file[name]);
      // });

      this.image_list = fileList.map(item => ({
        ...item,
        url: URL.createObjectURL(item.raw), // 创建一个blob URL
      }));
      this.selectedImage = this.image_list[-1];

      // // 查看image_list数组中每个对象的全部属性
      // this.image_list.forEach((item, index) => {
      //   const ownPropertyNames = Object.getOwnPropertyNames(item);
      //   ownPropertyNames.forEach(name => {
      //     console.log(`handleFileChange${index}: ${name} : `, item[name]);
      //   });
      // });

      // //查看image_list对象中第一个对象的全部属性
      // const ownPropertyNames2 = Object.getOwnPropertyNames(this.image_list[0]);
      // ownPropertyNames2.forEach(name => {
      //   console.log("handleFileChange0:"+name + ": " + this.image_list[0][name]);
      // });

    },

    // 更新selectedImage为当前点击的图片
    showImage(event) {
      //on-preview钩子给的对象仅包含点击的这个对象的uid，因此需要根据uid查到图片对象，再找其url

      //通过uid查找图像的自定义方法
      function findImageByUid(imageList, uidToFind) {
        for (let i = 0; i < imageList.length; i++) {
          if (imageList[i].uid === uidToFind) {
            return imageList[i];
          }
        }
        return undefined; // 或者可以抛出一个错误或者返回null
      }

      let fig_uid = event.uid
      this.selectedImage = findImageByUid(this.image_list, fig_uid);

      // //查看this.selectedImage对象中的全部属性
      // const ownPropertyNames = Object.getOwnPropertyNames(this.selectedImage);
      // ownPropertyNames.forEach(name => {
      //   console.log("showImage:"+name + ": " + this.selectedImage[name]);
      // });

    },



    detect() {
      console.log(this.count)

      if(this.url_original === ''){
        ElMessage.error("Haven't upload.");
      }

      else if(this.count === 0){//用于演示，第一次点击时

        this.url_result=require('@/assets/imgs/0_007_result.png');
        this.classification = ' 0 ';
        this.score = '5.3';

        this.count+=1;

        ElMessage.success('Done.');
      }

      else{

        this.url_result=require('@/assets/imgs/1_007_result.png');
        this.classification = ' 1 ';
        this.score = '98.9';
        ElMessage.success('Done.');
      }


    }
  }
};
</script>

<style>
</style>
